$same-btn-color: #3aafb9;;
%flexRowStart {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}
%flexColumn {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
%flexRowBetween {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
%flexRowCenter {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}
.center {
  width: 100%;
  height: 900rpx;
  @extend %flexRowCenter;
}
.sales-text {
  width: auto;
  padding: 10rpx 20rpx;
  background-color: #f4f4f4;
}
.modalRight {
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: fixed;
  align-items: center;
  justify-content: center;

  .dialog {
    font-size: 28rpx;
    background-color: white;
    position: absolute;
    border-radius: 8 rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 80%;
    padding: 20% 5%;
    color: #9B9B9B;
    .tip-name {
      margin-top: 11rpx;
      margin-bottom: 11rpx;
    }
    picker {
      width: 100%;
    }
    input {
      background-color: #F4F4F4;
      width: 100%;
      height: 60rpx;
      margin-top: 11rpx;
      margin-bottom: 11rpx;
    }
    .confirm-btn {
      width: 256rpx;
      height: 80rpx;
      border-radius: 56rpx;
      @extend %flexRowCenter;
      background-color: #3AAFB9;
    }
    .cancel-btn {
      width: 256rpx;
      height: 80rpx;
      border-radius: 56rpx;
      @extend %flexRowCenter;
      background-color: #ADADAD;
    }
    .btn {
      margin-top: 140rpx;
      color: #fff;
      @extend %flexRowBetween;
      width: 100%;
    }
  }
}
.msg_item_on{
  color: #2A94EC !important;
}
.top {
  width: 100%;
  box-sizing: border-box;
padding: 34rpx;
  @extend %flexRowBetween;
  .msg-status {
    flex: 1;
    @extend %flexRowStart;
    font-size: 26rpx;
    .a {
    margin-right: 15rpx;
    color: #707070;
    }
  }
  .a {
    font-size: 26rpx;
  }
}
.msg-item-list{
  display: flex;
  @extend %flexColumn;
  margin-top: 18rpx;
  .msg-item {
    width: 686rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    padding: 18rpx 44rpx;
    box-sizing: border-box;
    .msg-title {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      text-align: left;
    }
    .msg-content{
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      white-space: nowrap;
      width: 100%;
      margin-top: 14rpx;
      margin-bottom: 28rpx;
      height: 18*2rpx;
      font-size: 13*2rpx;
      font-weight: 400;
      text-align: left;
      color: #707070;
    }
    .msg-date {
      height: 18*2rpx;
      font-size: 13*2rpx;
      font-weight: 400;
      text-align: right;
      color: #707070;
      flex: 1;
    }
  }
}
.bottom-bar {
  z-index: 999;
  position: fixed;
  bottom: 0;
  height: 102rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(0,0,0,0.06);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 26rpx;
  .confirm {
    width: 116*2rpx;
    height: 36*2rpx;
    background: #2A94EC;
    border-radius: 25*2rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 10rpx;
    margin-left: 40rpx;
  }
}
.modalRight {
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: left;
  position: fixed;
  align-items: center;
  justify-content: center;

  .dialog {
    font-size: 28rpx;
    background-color: white;
    position: absolute;
    border-radius: 8 rpx;
    text-align: left;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 80%;
    padding: 20% 5%;
    color: #9B9B9B;
    .tip-name {
      margin-top: 11rpx;
      margin-bottom: 11rpx;
    }
    picker {
      width: 100%;
    }
    input {
      background-color: #F4F4F4;
      width: 100%;
      height: 60rpx;
      padding-left: 20rpx;
      text-align: left;
      box-sizing: border-box;
    }
    .confirm-btn {
      width: 256rpx;
      height: 80rpx;
      border-radius: 56rpx;
      @extend %flexRowCenter;
      background-color: #3AAFB9;
    }
    .cancel-btn {
      width: 256rpx;
      height: 80rpx;
      border-radius: 56rpx;
      @extend %flexRowCenter;
      background-color: #ADADAD;
    }
    .btn {
      margin-top: 140rpx;
      color: #fff;
      @extend %flexRowBetween;
      width: 100%;
    }
  }
}
